{extend name="Home/Theme/Theme1/base" /}

{block name="meta"}
<meta name="keywords" content="{$article['keywords']}">
<meta name="description" content="{$article['description']}">
{/block}

{block name="title"}{$article['name']}_{/block}

{block name="style"}
<link rel="stylesheet" type="text/css" href="/static/toastui/toastui-editor-viewer.min.css">
<style type="text/css">
    header.intro-header{
        position: relative;
        background-image: url('/');
    }
    @media all and (min-width: 800px) {
        .anchorjs-link{
            position: absolute;
            left: -0.75em;
            font-size: 1.1em;
            margin-top : -0.1em;
        }
    }
</style>
{/block}

<!--{block name="search"}-->
<!-- <input name="nav_id" value="{$article['navs_id']}" type="hidden" />-->
<!-- <input name="search" size="11" id="edtSearch" type="text">-->
<!--{/block}-->
{block name="main"}
<header class="intro-header" style="background-image: url(&#39;/&#39;)">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 ">
                <div class="site-heading">
                    <h1>{$article['name']}</h1>
                    <span class="subheading">{$article['description']}</span>
                </div>
            </div>
        </div>
    </div>
</header>
<article>
    <div class="container" style="overflow:hidden">
        <div class="row">

            <!-- Post Container -->
            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                post-container">
                <div id="viewer">
                </div>
                <p hidden id="content">{$article['content']|raw}</p>
            </div>

            <div class="
                col-lg-2 col-lg-offset-0
                visible-lg-block
                sidebar-container
                catalog-container">
                <div class="side-catalog">
                    <hr class="hidden-sm hidden-xs">
                    <h5>
                        <a class="catalog-toggle" href="/#">CATALOG</a>
                    </h5>
                    <ul class="catalog-body" id="catalog-body">
                    </ul>
                </div>
            </div>

            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                sidebar-container">

                <!-- Featured Tags -->

                {include file="Home/Theme/Theme1/tag" /}
            </div>

        </div>
    </div>
</article>

{/block}

{block name="js"}
<script type="text/javascript" src="/static/home/js/jquery.min.js"></script>
<script src="/static/toastui/toastui-editor-viewer.js"></script>
<script type="text/javascript">
    var html = $("#content").text();
    const viewer = new toastui.Editor({
        el: document.querySelector('#viewer'),
        initialValue: html
    });
    function generateCatalog (selector) {
        var P = $('div#viewer'),a,n,t,l,i,c;
        a = P.find('h1,h2,h3,h4,h5,h6');
        a.each(function () {
            n = $(this).prop('tagName').toLowerCase();
            i = $(this).data("nodeid");
            t = $(this).text();
            $(this).attr("id", i);
            c = $('<a href="#'+i+'" rel="nofollow">'+t+'</a>');
            l = $('<li class="'+n+'_nav"></li>').append(c);
            $(selector).append(l);
        });
        return true;
    }

    generateCatalog(".catalog-body");

    // toggle side catalog
    $(".catalog-toggle").click((function(e){
        e.preventDefault();
        $('.side-catalog').toggleClass("fold")
    }))

    async("/js/jquery.nav.js", function () {
        $('.catalog-body').onePageNav({
            currentClass: "active",
            changeHash: !1,
            easing: "swing",
            filter: "",
            scrollSpeed: 700,
            scrollOffset: 0,
            scrollThreshold: .2,
            begin: null,
            end: null,
            scrollChange: null,
            padding: 80
        });
    });
    async("http://cdn.bootcss.com/anchor-js/1.1.1/anchor.min.js",function(){
        anchors.options = {
            visible: 'always',
            placement: 'right',
            icon: '#'
        };
        anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
    })
</script>
{/block}